<template>
  <div class="Pagination">
    <table>
      <tbody>
        <tr>
          <td>
            <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 50]" :size="size" :disabled="disabled" :background="background"
              layout="slot,total, sizes" :total="count" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
              <span>共{{ pcount }}页，每页{{ pageSize }}条</span>
            </el-pagination>
          </td>
          <td>
            <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 50]" :size="size" :disabled="disabled" :background="background"
              layout="slot, prev, pager, next" :total="count" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
              <el-button @click="handleCurrentChange(pageIndex = 1)">首页</el-button>
            </el-pagination>
          </td>
          <td>
            <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 50]" :size="size" :disabled="disabled" :background="background"
              layout="slot, jumper" :total="count" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              prev-text="上一页" next-text="下一页">
              <el-button @click="handleCurrentChange(pageIndex = pcount)">尾页</el-button>
            </el-pagination>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { ref,watch } from 'vue'
import type { ComponentSize, countdownEmits } from 'element-plus'
import type { PropType } from 'vue' // 导入 PropType

//当前页码
const pageIndex = defineModel("pageIndex",{
  type: Number,
  required: true,
  default: 1,
})
//每页条数
const pageSize = defineModel("pageSize",{
  type: Number,
  required: true,
  default: 10,
})
//数据总条数
const count = defineModel("count",{
  type: Number,
  required: true,
  default: 0,
})
//总页数
const pcount = defineModel("pcount",{
  type: Number,
  required: true,
  default: 0,
})

const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

// 定义 emit 事件，分页组件里的 emit('pagination', page, size) 会触发父组件的 @pagination="pageWay"
const emit = defineEmits<{
  (e: 'pagination', page: number, size: number): void
}>()

const handleSizeChange = (val: number) => {
  pageIndex.value = 1 // 改每页条数时重置页码
  emit('pagination', pageIndex.value, val)
}

const handleCurrentChange = (val: number) => {
  emit('pagination', val, pageSize.value)
}


</script>

<style scoped>
.Pagination+.Pagination {
  margin-top: 10px;
}

.Pagination .Pagination {
  margin-bottom: 16px;
}
</style>